<template>
    <!-- 这是左侧栏组件 -->
    <div>
        <el-row class="tac">
            <el-col>
                <!-- 菜单 -->
                <el-menu
                    :default-active="defaultActive"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    unique-opened
                    router
                >
                    <el-menu-item index="/home">
                        <i class="el-icon-menu"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <!-- 循环 -->
                    <div
                        v-for="item in menus"
                        :key="item.id"
                    >
                        <el-submenu v-if="item.children" :index="item.id + ''">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item
                                v-for="item1 in item.children.filter(
                                    (item) => item.status == 1
                                )"
                                :key="item1.id"
                                :index="item1.url"
                                >{{ item1.title }}</el-menu-item
                            >
                        </el-submenu>
                        <el-menu-item v-else :index="item.id + ''">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            defaultActive: "/home",
            menus:[],
        };
    },
    // methods: {
    //     //获取菜单列表
    //     ...Vuex.mapActions({
    //         getlist: "menu/menulist_a",
    //     }),
    // },
    mounted() {
        //记录上一次在的路径
        this.defaultActive = this.$route.path;
        // //调取menulist
        // this.getlist();

        //如果登录了 获取到menus 那么就把menus筛选出来给menus属性
        if(this.menulist.menus){
            this.menus = this.menulist.menus.filter(item => item.status == 1)
        }
    },
    watch:{
        //监听路径是否发生变化
        $route(val){
            this.defaultActive = val.path;
        }
    },
    computed: {
        ...Vuex.mapGetters({
            menulist: "user/getuser",
        }),
    },
};
</script>

<style scoped>
.el-menu {
    height: calc(100vh - 60px);
}
</style>
